<template>
  <div class="lg-button-group">
    <slot/>
  </div>
</template>

<script>
export default {
  name: 'lgButtonGroup'
}
</script>

<style lang="less" scoped>
.lg-button-group{
    display: inline-block;
    /deep/ .lg-button{
       border-radius: 0;
       float: left;
        &:first-of-type{
            border-top-left-radius: 5px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 5px;
        }
        &:last-of-type{
            border-top-left-radius: 0;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 0;
        }
        & ~ .lg-button{
           margin-left: -1px !important;
        }
        &:last-of-type:first-of-type{
            border-radius: 4px;
        }
    }
    /deep/ .circle {
        &:first-of-type{
            border-top-left-radius: 43%;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 43%;
        }
        &:last-of-type{
            border-top-left-radius: 0;
            border-top-right-radius: 43%;
            border-bottom-right-radius: 43%;
            border-bottom-left-radius: 0;
        }
        &:last-of-type:first-of-type{
            border-radius: 50%;
        }
    }
}
</style>
